import React, { useState } from 'react'

export default function App() {


    const [obj, setObj] = useState({
        x: 0,
        y: 0,
    })
    // 对于一个对象中有些属性会被修改，而有些属性是不会被修改的
    // 所以我们可以给这些数据分开定义
    // 如果不需要修改值，那么第二个参数中的修改方法可以不写
    const [box] = useState({
        w: 100,
        h: 100
    })

    function mouseMove(event) {
        setObj({
            x: event.clientX,
            y: event.clientY,
        })
    }

    return (
        <div onMouseMove={mouseMove} style={{ width: '100vw', height: '100vh' }}>
            <div>
                宽：{box.w}  ----- 高：{box.h}
            </div>
            <div>
                x：{obj.x}  ----- y：{obj.y}
            </div>
        </div>
    )
}
